<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>多图下载</title>
  <link href="lib/elementui_index.min.css" rel="stylesheet">
  <link rel="stylesheet" href="popup.css">
  <script src="lib/vue.min.js"></script>
  <script src="lib/elementui_index.min.js"></script>
  <script src="lib/jszip.min.js"></script>
  <script src="lib/globalMethods.js"></script>
</head>
<body>
  <div v-loading="loading" element-loading-text="下载中" element-loading-background="rgba(0, 0, 0, 0.7)" id="app">
    <el-input v-model="configModel.selectorName" size="small"
      placeholder="请输入内容，例如 img，例如 .img-div img，必须带 CSS 选择器符号，默认当前页面所有图片">
      <template slot="prepend">选择器名</template>
    </el-input>
    <el-input v-model="configModel.fileName" size="small" placeholder="请输入内容，默认图片地址上名称">
      <template slot="prepend">文件名称</template>
    </el-input>
    <div class="desc">
      <div>示例：{NO}_{PAGE_TITLE}_{NAME}_{DATE}.{EXT}</div>
      <div>{NO}：序号，从1开始</div>
      <div>{PAGE_TITLE}：页面标题</div>
      <div>{NAME}：原文件名</div>
      <div>{DATE}：时间戳</div>
      <div>{EXT}：后缀名，不要动就会保留图片本身的后缀名</div>
    </div>
    <div class="el-input el-input--small el-input-group el-input-group--prepend">
      <div class="el-input-group__prepend">下载模式</div>
      <el-radio-group v-model="configModel.downloadMode" size="small">
        <el-radio-button v-for="item in downloadModeArr" :key="item" :label="item">{{item}}</el-radio-button>
      </el-radio-group>
    </div>
    <!-- <div class="el-input el-input--small el-input-group el-input-group--prepend">
      <div class="el-input-group__prepend">视图类型</div>
      <el-radio-group v-model="configModel.viewType" size="small">
        <el-radio-button v-for="item in viewTypeArr" :key="item" :label="item">{{item}}</el-radio-button>
      </el-radio-group>
    </div> -->
    <div class="el-input el-input--small el-input-group el-input-group--prepend">
      <div class="el-input-group__prepend">图片排序</div>
      <el-radio-group v-model="configModel.imageSorting" size="small">
        <el-radio-button v-for="item in imageSortingArr" :key="item" :label="item">{{item}}</el-radio-button>
      </el-radio-group>
    </div>
    <div class="btns">
      <el-button v-for="item in btnArr" :key="item.label" :type="item.type" size="small"
        :disabled="item.label == '下载图片' && btnDisabled" @click="handleBtnClick(item.label)">{{item.label}}</el-button>
    </div>
  </div>
  <script src="popup.js"></script>
</body>
</html>
